<div class="info-item">

  <div mat-subheader><b>Fubuki {{serverType | titlecase}}</b></div>

  <div mat-subheader><b>Group Details</b></div>
  <mat-divider></mat-divider>

  <!-- mat-elevation-z1 ? -->
  <table mat-table [dataSource]="groupList" class="mat-elevation-z1">
  <!--- Note that these columns can be defined in any order.
      The actual rendered columns are set as a property on the row definition" -->

    <ng-container matColumnDef={{groupColumnName}} *ngFor="let groupColumnName of basicGroupColumns">
      <th mat-header-cell *matHeaderCellDef> {{toViewName(groupColumnName) | uppercase}} </th>
      <td mat-cell *matCellDef="let groupInfo"> {{groupInfo[groupColumnName]}} </td>
    </ng-container>

    <ng-container matColumnDef="mode">
      <th mat-header-cell *matHeaderCellDef>MODE</th>
      <td mat-cell *matCellDef="let groupInfo">
        <mat-chip-listbox aria-label="modes">
          <mat-chip *ngFor="let modeName of getActiveModes(groupInfo.mode)"
            matTooltip={{reduceStringArray(groupInfo.mode[modeName])}}
            [matTooltipPositionAtOrigin]="true"
            [matTooltipPosition]="'above'">
            {{modeName}}
          </mat-chip>
        </mat-chip-listbox>
      </td>
    </ng-container>

    <ng-container matColumnDef="server_udp_status">
      <th mat-header-cell *matHeaderCellDef>SERVER_UDP_STATUS</th>
      <td mat-cell *matCellDef="let groupInfo">

        <mat-chip-listbox aria-label="server_udp_status">
          <mat-chip
            matTooltip="{{toJsonString(groupInfo.server_udp_status)}} (click to copy)"
            [matTooltipPositionAtOrigin]="false"
            [matTooltipPosition]="'above'"
            (click)="copy(toJsonString(groupInfo.server_udp_status))"
          >
            {{parseUdpStatus(groupInfo.server_udp_status)}}
          </mat-chip>
        </mat-chip-listbox>

      </td>
    </ng-container>

    <!-- <ng-template></ng-template> -->
    <ng-component *ngFor="let hcColumnName of groupHcColumns">
      <ng-container matColumnDef="server_{{hcColumnName}}_latency">

        <th mat-header-cell *matHeaderCellDef> SERVER_{{hcColumnName | uppercase}}_LATENCY </th>
        <td mat-cell *matCellDef="let groupInfo">
          {{toLatency(groupInfo["server_" + hcColumnName + "_hc"].elapsed) | number}}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="server_{{hcColumnName}}_loss_rate">
        <th mat-header-cell *matHeaderCellDef> SERVER_{{hcColumnName | uppercase}}_LOSS_RATE </th>
        <td mat-cell *matCellDef="let groupInfo">
          <mat-chip-listbox aria-label="loss_rate">
            <mat-chip
              matTooltip="{{groupInfo['server_' + hcColumnName + '_hc'] | json}} (click to copy)"
              [matTooltipPositionAtOrigin]="false"
              [matTooltipPosition]="'above'"
              (click)="copy(toJsonString(groupInfo['server_' + hcColumnName + '_hc']))"
            >
              {{toLossRate(groupInfo['server_' + hcColumnName + '_hc'])| percent}}
            </mat-chip>
          </mat-chip-listbox>
        </td>
      </ng-container>
    </ng-component>
    
    <tr mat-header-row *matHeaderRowDef="viewGroupColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: viewGroupColumns;"></tr>
  </table>

  <br>

  <div mat-subheader><b>Node List</b></div>
  <mat-divider></mat-divider>
  
  <table mat-table [dataSource]="nodeList" class="mat-elevation-z1">
  
    <ng-container matColumnDef="firstColumn">
      <th mat-header-cell *matHeaderCellDef> </th>
      <td mat-cell *matCellDef="let nodeInfo"> <mat-icon matListItemIcon>computer</mat-icon> </td>
    </ng-container>
  
    <ng-container matColumnDef={{nodeColumnName}} *ngFor="let nodeColumnName of basicNodeColumns">
      <th mat-header-cell *matHeaderCellDef> {{toViewName(nodeColumnName) | uppercase}} </th>
      <td mat-cell *matCellDef="let nodeInfo"> {{nodeInfo.node[nodeColumnName]}} </td>
    </ng-container>

    <ng-container matColumnDef="mode">
      <th mat-header-cell *matHeaderCellDef>MODE</th>
      <td mat-cell *matCellDef="let nodeInfo">

        <mat-chip-listbox aria-label="modes">
          <mat-chip
            *ngFor="let modeName of getActiveModes(nodeInfo.node.mode)"
            matTooltip={{reduceStringArray(nodeInfo.node.mode[modeName])}}
            [matTooltipPositionAtOrigin]="true"
            [matTooltipPosition]="'above'"
          >
            {{modeName}}
          </mat-chip>
        </mat-chip-listbox>

      </td>
    </ng-container>

    <ng-container matColumnDef="allowed_ips">
      <th mat-header-cell *matHeaderCellDef>ALLOWED_IPS</th>
      <td mat-cell *matCellDef="let nodeInfo">
        <mat-chip-listbox aria-label="allowed_ips">
          <mat-chip
            *ngFor="let ip of nodeInfo.node.allowed_ips"
            matTooltip="click to copy"
            (click) = "copy(ip)"
          >
            {{ip}}
          </mat-chip>
        </mat-chip-listbox>
      </td>
    </ng-container>

    <ng-container matColumnDef="register_time">
      <th mat-header-cell *matHeaderCellDef>REGISTER_TIME</th>
      <td mat-cell *matCellDef="let nodeInfo">
        {{secondsToDate(nodeInfo.node.register_time) | date: "yyyy-MM-dd HH:mm:ss"}}
      </td>
    </ng-container>

    <ng-container matColumnDef="udp_status">
      <th mat-header-cell *matHeaderCellDef>UDP_STATUS</th>
      <td mat-cell *matCellDef="let nodeInfo">
    
        <mat-chip-listbox aria-label="udp_status">
          <mat-chip
            matTooltip="{{toJsonString(nodeInfo.udp_status)}} (click to copy)"
            [matTooltipPositionAtOrigin]="false"
            [matTooltipPosition]="'above'"
            (click)="copy(toJsonString(nodeInfo.udp_status))"
          >
            {{parseUdpStatus(nodeInfo.udp_status)}}
          </mat-chip>
        </mat-chip-listbox>
    
      </td>
    </ng-container>


    <ng-container matColumnDef="latency">
      <th mat-header-cell *matHeaderCellDef>LATENCY</th>
      <td mat-cell *matCellDef="let nodeInfo">
        {{toLatency(nodeInfo.hc.elapsed) | number}}ms
      </td>
    </ng-container>

    <ng-container matColumnDef="loss_rate">
      <th mat-header-cell *matHeaderCellDef>LOSS_RATE</th>
      <td mat-cell *matCellDef="let nodeInfo">

        <mat-chip-listbox aria-label="loss_rate">
          <mat-chip
            matTooltip="{{nodeInfo.hc | json}} (click to copy)"
            [matTooltipPositionAtOrigin]="false"
            [matTooltipPosition]="'above'"
            (click)="copy(toJsonString(nodeInfo.hc))"
          >
            {{toLossRate(nodeInfo.hc)| percent}}
          </mat-chip>
        </mat-chip-listbox>      
      </td>
    </ng-container>

    <ng-component *ngFor="let hcColumnName of nodeHcColumns">
      <ng-container matColumnDef="{{hcColumnName}}_latency">

        <th mat-header-cell *matHeaderCellDef> {{hcColumnName | uppercase}}_LATENCY </th>
        <td mat-cell *matCellDef="let groupInfo">
          {{toLatency(groupInfo[hcColumnName + '_heartbeat_cache'].elapsed) | number}}ms
        </td>
      </ng-container>

      <ng-container matColumnDef="{{hcColumnName}}_loss_rate">
        <th mat-header-cell *matHeaderCellDef> {{hcColumnName | uppercase}}_LOSS_RATE </th>
        <td mat-cell *matCellDef="let groupInfo">
          <mat-chip-listbox aria-label="loss_rate">
            <mat-chip
              matTooltip="{{groupInfo[hcColumnName + '_heartbeat_cache'] | json}} (click to copy)"
              [matTooltipPositionAtOrigin]="false"
              [matTooltipPosition]="'above'"
              (click)="copy(toJsonString(groupInfo[hcColumnName + '_heartbeat_cache']))"
            >
              {{toLossRate(groupInfo[hcColumnName + '_heartbeat_cache'])| percent}}
            </mat-chip>
          </mat-chip-listbox>
        </td>
      </ng-container>
    </ng-component>
  
    <tr mat-header-row *matHeaderRowDef="viewNodeColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: viewNodeColumns;"></tr>
  </table>

  <!--
    如果不加mat-list, 会导致mat-subheader缺少样式,
    如果从info-list组件中路由到当前组件中, 则会带上之前的样式, 刷新或直接进入该组件样式会消失
  -->
  <mat-list></mat-list>

  <!-- <mat-list>
    <div mat-subheader><b>Nodes</b></div>
    <mat-divider></mat-divider>
  
    <mat-card *ngFor="let nodeInfo of this.nodeList">
      <mat-list-item class="nodeInfo">
        <mat-divider></mat-divider>
        <mat-icon matListItemIcon>computer</mat-icon>
        <div matListItemTitle>
          {{nodeInfo.node.name}}
        </div>
        <div matListItemLine>
          {{nodeInfo.node.virtual_addr}}
        </div>
      </mat-list-item>
    </mat-card>
  </mat-list> -->


</div>
